<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例01</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css"> 
    
</head>
<body>
    <div id="app" >
        <table class="table table-bordered table-hover table-striped">
            <thead>
                
                <th>#</th>
                <th>品牌名称</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </thead>

            <tbody>
               <tr v-for="item in list" :key="item.id">
                   <td>{{ item.id }}</td>
                   <td>{{ item.name }}</td>
                   <td>
                       <div>
                       <input type="checkbox" id="customSwitch1"     v-model="item.status">
                       <label for="customSwitch1" v-if="item.status">已启用</label>
                       <label for="customSwitch1" v-else>已禁用</label>
                   </td>
                        </div>
                   <td>{{ item.time | dataFormat}}</td>
                   <td>
                       <a href="javascript:;">删除</a>
                   </td>
               </tr>
            </tbody>
        </table>
    </div>

    <script>
        //声明格式化时间的全局过滤器
        Vue.filter('dataFormat', function(time){
            //对time进行格式化处理 xx年xx月xx日 xxH:xxM:xxS
            //return
         
            //直接调用 dayjs()得到当前时间
            //dayjs(给定的日期时间)得到指定的日期
            const dtStr = dayjs(time).format('YYYY')
        })

        const vm = new Vue({
            el:"#app",
            data:{
               list: [
                   {id:1, name:'宝马', status:true, time:new Date() },
                   {id:2, name:'奔驰', status:true, time:new Date() },
                   {id:3, name:'奥迪', status:true, time:new Date() },
               ]
            },
            methods:{

            },
        })
    </script>
</body>
</html>